<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>订单流程</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <style>
        html,
        body {
            font-family: "微软雅黑"
        }

        #app {
            float: left;
            background: #f5f5f5;
        }

        .aui-bar.aui-bar-light.share_nav {
            background: #fff;
            padding-top: 2.5rem;
            position: fixed;
            margin-top: 0 !important;
        }

        .share_nav .share_nav_title {
            height: 4.4rem;
            line-height: 4.4rem;
            position: relative;
            top: 0;
            left: 0;
            right: 0;
            font-size: 1.6rem;
            color: #000;
        }

        .share_nav .share_nav_left {
            top: 2.5rem;
            left: 1.3rem;
            position: absolute;
            z-index: 5;
        }

        .share_nav .share_nav_right {
            top: 2.5rem;
            right: 1.3rem;
            position: absolute;
        }

        .share_nav .share_nav_right span {
            position: absolute;
            top: 0.8rem;
            right: 0;
            width: 1.2rem;
            height: 1.2rem;
            line-height: 1.2rem;
            color: #fff;
            background: #ed6a20;
            font-size: 1rem;
            border-radius: 100%;
        }

        .share_nav img {
            height: 1.7rem;
            margin-top: 1.35rem;
        }
        /*内容区*/

        .content {
            float: left;
            margin: 6.9rem 0 0 0;
            width: 100%;
        }

        .address {
            width: 100%;
            height: 10.7rem;
            float: left;
            box-sizing: border-box;
            padding: 0 1.3rem;
        }

        .address_box {
            width: 100%;
            height: 8.25rem;
            max-height: 8.25rem;
            box-shadow: 0rem 0.25rem 0.95rem 0.05rem rgba(212, 211, 211, 0.5);
            border-radius: 0.25rem;
            margin: 1.25rem auto 0 auto;
            position: relative;
            background-color: #ffffff;
        }

        .address_box>h5 {
            height: 8.25rem;
            line-height: 8.25rem;
            font-size: 1.5rem;
            padding-left: 1rem;
        }

        .address_box>img {
            position: absolute;
            right: 1rem;
            top: 50%;
            -ms-transform: translate(0, -50%);
            -moz-transform: translate(0, -50%);
            -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
        }

        .address_user {
            width: 100%;
            box-sizing: border-box;
            padding: 0 1.2rem 0 4.3rem;
            font-size: 1.4rem;
            letter-spacing: 0.03rem;
            color: #000000;
            height: 1.4rem;
            line-height: 1.4rem;
            margin: 1.5rem 0 0 0;
            float: left;
            background-color: #ffffff;
        }

        .address_user span {
            float: right;
            background-color: #ffffff;
        }

        .address_content {
            width: 100%;
            height: 2.6rem;
            float: left;
            margin: 1.3rem 0 0 0;
            background-color: #ffffff;
        }

        .address_content_icon {
            width: 4.3rem;
            height: 100%;
            float: left;
        }

        .address_content_text {
            width: 27.95rem;
            height: 100%;
            float: left;
            font-size: 1.2rem;
            line-height: 1.3rem;
            color: #333333;
            letter-spacing: 0.01rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            background-color: #ffffff;
        }

        .address_content_arrow {
            width: 2.65rem;
            height: 100%;
            float: right;
        }

        .address_content_icon img {
            width: 1.6rem;
            height: 2rem;
            margin: 0.3rem 0 0 1.2rem;
        }

        .address_content_arrow img {
            width: 0.7rem;
            height: 1.3rem;
            margin: 0.65rem 0 0 0.75rem
        }

        .content_line {
            width: 100%;
            height: 0.7rem;
            float: left;
            background: url(../../image/user/order_true/content_line.png);
            background-size: 100% 100%
        }

        .shop_box {
            width: 100%;
            float: left;
            box-sizing: border-box;
            padding: 0 1.3rem;
        }

        .shop_title {
            width: 100%;
            height: 4.5rem;
            float: left;
            padding: 1.45rem 0 1.5rem 0;
            line-height: 1.55rem;
            font-size: 1.4rem;
            letter-spacing: 0.03rem;
            color: #333333;
            font-weight: 800;
        }

        .shop_title .shop_icon {
            width: 1.65rem;
            height: 1.55rem;
            float: left;
            margin: 0 0.85rem 0 0;
        }

        .shop_title .shop_arrow {
            width: 0.55rem;
            height: 1.1rem;
            float: left;
            margin: 0.3rem 0 0 1rem;
        }

        .shop_title span {
            float: left;
        }

        .commodity_box {
            width: 100%;
            float: left;
        }

        .commodity {
            width: 100%;
            height: 11.9rem;
            background-color: #ffffff;
            box-shadow: 0rem 0.25rem 0.95rem 0.05rem rgba(212, 211, 211, 0.5);
            border-radius: 0.25rem;
            margin: auto 0 1.3rem 0;
            box-sizing: border-box;
            padding: 1.45rem 1.4rem 0 1.2rem;
            position: relative;
        }

        .commodity_img {
            width: 27.7%;
            height: 9rem;
            float: left;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            float: left;
        }

        .commodity_content {
            width: 72.3%;
            height: 100%;
            float: left;
            box-sizing: border-box;
            padding: 0 0 0 0.6rem;
        }

        .commodity_content_title {
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            float: left;
            font-size: 1.3rem;
            line-height: 1.4rem;
        }

        .commodity_content_type {
            width: 100%;
            height: 1.2rem;
            font-size: 1.2rem;
            line-height: 1.2rem;
            margin: 0.55rem 0 2.9rem;
            float: left;
        }

        .commodity_content_money {
            font-size: 1.7rem;
            height: 1.7rem;
            line-height: 1.7rem;
            letter-spacing: 0.04rem;
            color: #f01818;
            position: relative;
            float: left;
            width: 100%;
        }

        .commodity_content_money span {
            font-size: 1.33rem;
            color: #f01818;
        }

        .commodity_content_num {
            position: absolute;
            right: 0rem;
            bottom: 0rem;
            color: #333333;
            letter-spacing: 0.03rem;
            font-size: 1.3rem;
            font-weight: 600
        }

        .order_box {
            width: 100%;
            float: left;
            box-sizing: border-box;
            padding: 0 1.3rem;
        }

        .order_other {
            width: 100%;
            height: 9.6rem;
            background-color: #ffffff;
            box-shadow: 0rem 0.25rem 0.95rem 0.05rem rgba(212, 211, 211, 0.5);
            border-radius: 0.25rem;
            float: left;
            margin: 0 0 1.3rem 0;
            box-sizing: border-box;
            padding: 0.15rem 1.2rem 0 1.15rem;
        }

        .order_other_list {
            width: 100%;
            height: 1.4rem;
            font-size: 1.4rem;
            letter-spacing: 0.03rem;
            color: #333333;
            position: relative;
            float: left;
            margin: 1.35rem 0 0 0;
            line-height: 1.4rem;
        }

        .order_other_list span {
            float: right;
            margin-right: 2.65rem;
        }

        .aui-list-item-arrow:before {
            border: 1px solid #666666;
            border-top: none;
            border-right: none
        }

        .order_other_list input {
            display: inline-block;
            width: 26rem;
            height: 100%;
            font-size: 1.3rem;
            line-height: 1.3rem;
            position: relative;
            top: -0.05rem;
            margin-left: 1.3rem;
        }

        .order_total {
            width: 100%;
            height: 6.95rem;
            background-color: #ffffff;
            box-shadow: 0rem 0.25rem 0.95rem 0.05rem rgba(212, 211, 211, 0.5);
            border-radius: 0.25rem;
            float: left;
            margin: 0 0 1.3rem 0;
            padding: 0.15rem 1.2rem 0 1.15rem;
        }

        .order_total_list {
            width: 100%;
            height: 1.4rem;
            font-size: 1.4rem;
            line-height: 1.4rem;
            margin: 1.35rem 0 0 0;
        }

        .order_total_list span {
            float: right;
        }

        .bottom_block {
            width: 100%;
            float: left;
            height: 4.9rem;
        }

        .bottom {
            width: 100%;
            height: 4.9rem;
            background-color: #ffffff;
            box-shadow: 0rem 0.15rem 1rem 0rem rgba(4, 0, 0, 0.45);
            position: fixed;
            bottom: 0;
        }

        .bottom_left {
            width: 26.8rem;
            height: 100%;
            line-height: 4.9rem;
            float: left;
            color: #333333;
            font-size: 1.6rem;
            font-weight: 600;
            box-sizing: border-box;
            padding: 0 0 0 2.5rem;
        }

        .bottom_left span {
            color: #f01818;
        }

        .bottom_right {
            width: 10.7rem;
            height: 4.9rem;
            background-image: linear-gradient(-90deg, #ff4e18 0%, #f9280d 52%, #f20101 100%), linear-gradient( #ff8600, #ff8600);
            background-blend-mode: normal, normal;
            float: right;
            text-align: center;
            color: #ffffff;
            font-size: 1.4rem;
            font-weight: 800;
            line-height: 4.9rem;
        }
        /*支付模块css*/

        .pay-modular {
            /*背景*/
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            background: rgba(0, 0, 0, 0.5);
            z-index: 10;
            transition: 0.2s ease all
        }

        .modular-main {
            height: 43.95rem;
            width: 100%;
            float: left;
            position: absolute;
            bottom: 0;
            left: 0;
            background: #f2f2f2;
            border-radius: 1.25rem 1.25rem 0 0;
            /*transition: 0.5s ease all*/
            animation: myfirst 0.3s;
        }

        .modular-main-top {
            width: 100%;
            height: 4.6rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #ebebeb;
            float: left;
            font-size: 1.8rem;
            line-height: 4.6rem;
            text-align: center;
            position: relative;
            border-radius: 1.25rem 1.25rem 0 0;
        }

        .pay-modular-colse {
            width: 1.3rem;
            height: 1.3rem;
            position: absolute;
            top: 1.6rem;
            left: 1.35rem;
        }

        @keyframes myfirst {
            0% {
                left: 0;
                bottom: -43.95rem;
            }
            100% {
                left: 0;
                bottom: 0;
            }
        }

        .modular-main-box {
            width: 100%;
            float: left;
        }

        .modular-select-pay {
            width: 100%;
            height: 39.35rem;
        }

        .modular-select-pay-money {
            width: 100%;
            height: 7.25rem;
            line-height: 7.25rem;
            font-size: 3.6rem;
            font-weight: 600;
            text-align: center;
            background: #fff;
            float: left;
        }

        .modular-select-list {
            width: 100%;
            float: left;
            background: #fff;
        }

        .modular-select-li {
            width: 100%;
            height: 6.05rem;
            float: left;
        }

        .li-img {
            width: 14.53%;
            float: left;
        }

        .li-content {
            width: 85.47%;
            float: left;
            height: 100%;
            position: relative;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #ebebeb
        }

        .modular-select-li .li-content:last-child {
            border-bottom: none;
        }

        .li-content-title {
            width: 100%;
            height: 1.5rem;
            font-size: 1.5rem;
            line-height: 1.5rem;
            letter-spacing: 0.02rem;
            color: #171717;
            margin: 1.3rem 0 0.8rem 0;
        }

        .li-content-text {
            width: 100%;
            height: 1.1rem;
            font-size: 1.1rem;
            line-height: 1.1rem;
            color: #848689;
        }

        .alipay {
            width: 2.45rem;
            height: 2.45rem;
            margin: 1.85rem auto auto auto;
        }

        .weixinpay {
            width: 2.5rem;
            height: 2.5rem;
            margin: 1.75rem auto auto auto;
        }

        .h5pay {
            width: 3rem;
            height: 2.4rem;
            margin: 1.75rem auto auto auto;
        }

        .balancepay {
            width: 2.5rem;
            height: 2.5rem;
            margin: 1.85rem auto auto auto;
        }

        .li-content-check {
            float: right;
            display: inline-block;
            position: absolute;
            top: 2rem;
            right: 1.35rem;
        }

        .li-content-check img {
            width: 1.95rem;
            height: 1.95rem;
        }

        .modular-select-bottom {
            width: 100%;
            height: 7.9rem;
            float: left;
        }

        .modular-select-btn {
            width: 93%;
            height: 4rem;
            background-color: #ed6a20;
            border-radius: 1.98rem;
            margin: auto;
            font-size: 1.6rem;
            line-height: 4rem;
            text-align: center;
            color: #ffffff;
            margin: 2.4rem auto 0 auto;
        }

        .modular-ipt-password {
            height: 39.35rem;
            width: 100%;
            position: relative;
            float: left;
        }

        .ipt-password {
            width: 93%;
            height: 4.65rem;
            border-radius: 0.5rem;
            border: solid 0.05rem #888888;
            display: flex;
            margin: 2.7rem auto 1.25rem auto;
        }

        .ipt-password-i {
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 4.65rem;
            border-right: 0.05rem solid #888888;
        }

        .ipt-password .ipt-password-i:last-child {
            border-right: none;
        }

        .ipt-password-i .i-icon {
            width: 2rem;
            height: 2rem;
            margin: 1.325rem auto auto auto;
            background: #000;
            border-radius: 100%;
        }

        .forget {
            width: 100%;
            text-align: right;
            font-size: 1.5rem;
            line-height: 1.5rem;
            height: 1.5rem;
            color: #ed6a20;
            box-sizing: border-box;
            padding: 0 1.5rem;
        }

        .keyboard {
            width: 100%;
            float: left;
            position: absolute;
            bottom: 0;
            left: 0;
            background: #fff;
        }

        .keyboard-btn {
            width: 33.33%;
            float: left;
            height: 5.1rem;
            box-sizing: border-box;
            border-bottom: 0.05rem solid #8d8d8d;
            border-right: 0.05rem solid #8d8d8d;
        }

        .keyboard-btn-text {
            width: 100%;
            font-size: 2rem;
            line-height: 2rem;
            font-weight: 600;
            text-align: center;
            margin: 1rem 0 0 0;
            float: left;
        }

        .keyboard-btn-en {
            width: 100%;
            height: 0.85rem;
            line-height: 0.85rem;
            font-size: 0.85rem;
            text-align: center;
            float: left;
            margin: 0.6rem 0 0 0;
        }

        .text-zero {
            margin: 1.65rem 0 0 0;
        }

        .border-r-none {
            border-right: none;
        }

        .border-b-none {
            border-bottom: none;
        }

        .bgd2d5db {
            background: #d2d5db
        }

        .delete-num {
            width: 2.4rem;
            height: 1.7rem;
            margin: 1.95rem auto 0 auto;
        }

        .bgfff {
            background: #fff
        }

        .bgf2 {
            background: #f2f2f2
        }

        .pay-modular-arrow {
            width: 0.75rem;
            height: 1.45rem;
            position: absolute;
            top: 1.5rem;
            left: 1.3rem;
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="aui-bar aui-bar-nav aui-bar-light share_nav">
            <a class="aui-pull-left share_nav_left" onclick="close_win()">
                <img src="../../image/share/share_index_nav4.png" alt="">
            </a>
            <div class="aui-title share_nav_title">确认订单</div>
            <a class="aui-pull-right share_nav_right">
            </a>
        </header>
        <div class="content aui-refresh-content">
            <div class="address" v-if="address_info != ''" @click="select_address">
                <div class="address_box">
                    <div class="address_user">
                        收货人：{{ address_info.consignee }}<span>{{ address_info.telephone }}</span>
                    </div>
                    <div class="address_content">
                        <div class="address_content_icon">
                            <img src="../../image/user/order_true/address_icon.png" alt="">
                        </div>
                        <div class="address_content_text">
                            收货地址：{{ address_info.province + address_info.city + address_info.district + address_info.address }} 杭州市 西湖区 华星时代广场10楼文三路A座2022室
                        </div>
                        <div class="address_content_arrow">
                            <img src="../../image/user/order_true/address_arrow.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="address" v-else>
                <div class="address_box" @click="select_address">
                    <h5>暂无地址,请前往添加</h5>
                    <img src="../../image/user/order_true/address_arrow.png" alt="">
                </div>
            </div>
            <div class="content_line"></div>
            <div class="shop_box" v-for="(shop,indexs) in orderShop" :key="indexs">
                <div class="shop_title">
                    <img src="../../image/user/order_true/icon2.png" alt="" class="shop_icon">
                    <span>{{ shop.store_name }}</span>
                    <img :src="shop.store_logo" alt="" class="shop_arrow">
                </div>
                <div class="commodity_box" v-for="(goods,index) in shop.goods_list" :key="index">
                    <div class="commodity">
                        <div class="commodity_img" :style="{backgroundImage:'url('+goods.goods_logo +')'}"></div>
                        <div class="commodity_content">
                            <div class="commodity_content_title">{{ goods.goods_name }}</div>
                            <div class="commodity_content_type">
                                {{ goods.goods_skuinfo }}
                            </div>
                            <div class="commodity_content_money">
                                <span>￥</span>{{ goods.goods_price }}
                                <div class="commodity_content_num">
                                    ×{{ goods.goods_nums }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="order_box">
                <div class="order_other">
                    <div class="order_other_list aui-list-item-arrow">
                        配送 <span>快递免邮</span>
                    </div>
                    <div class="order_other_list aui-list-item-arrow">
                        发票 <span>不开发票</span>
                    </div>
                    <div class="order_other_list">
                        留言 <input type="text" name="" value="" placeholder="建议留言前先与商家沟通确认">
                    </div>
                </div>
                <div class="order_total">
                    <div class="order_total_list">
                        商品合计<span>¥{{ goods_all_money }}</span>
                    </div>
                    <div class="order_total_list">
                        运费<span>+¥{{ express_fee }}</span>
                    </div>
                </div>
            </div>
            <div class="bottom_block"></div>
            <div class="bottom">
                <div class="bottom_left">
                    实付：<span>￥{{ order_all_money }}</span>
                </div>
                <div class="bottom_right" @click="open_pay_modular">
                    提交订单
                </div>
            </div>
        </div>
        <!-- 支付模块 -->
        <div class="pay-modular" v-if="is_pay==0?false:true">
            <div class="modular-main">
                <div class="modular-main">
                    <div class="modular-main-top" :class="pay_modular==0?'bgfff':'bgf2'">
                        <img src="../../image/user/order_true/pay/close.png" alt="" class="pay-modular-colse" @click="close_pay_modular" v-if="pay_modular==0?true:false">
                        <img src="../../image/user/order_true/pay/arrow_2.png" alt="" class="pay-modular-arrow" @click="back_pay_modular" v-if="pay_modular==1?true:false"> {{pay_modular==0?"确认付款":"请输入支付密码"}}
                    </div>
                    <div class="modular-main-box">
                        <div class="modular-select-pay" v-if="pay_modular==0?true:false">
                            <div class="modular-select-pay-money">
                                ￥{{ order_all_money }}
                            </div>
                            <div class="modular-select-list">
                                <div class="modular-select-li" v-for="(item,key) in pay_function" @click="select_pay_fun(key)">
                                    <div class="li-img">
                                        <img :src="item.url" alt="" :class="item.en">
                                    </div>
                                    <div class="li-content">
                                        <div class="li-content-title">
                                            {{item.name}}
                                        </div>
                                        <div class="li-content-text">
                                            {{item.describe}}
                                        </div>
                                        <div class="li-content-check">
                                            <img :src="is_pay_fun==key?'../../image/user/order_true/pay/check_on.png':'../../image/user/order_true/pay/check_off.png'" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modular-select-bottom">
                                <div class="modular-select-btn" @click="open_pay_ipt">
                                    立即付款
                                </div>
                            </div>
                        </div>
                        <div class="modular-ipt-password" v-if="pay_modular==1?true:false">
                            <div class="ipt-password">
                                <div class="ipt-password-i" v-for="(item,key) in ipt_box">
                                    <div class="i-icon" v-if="item.num?true:false"></div>
                                </div>
                            </div>
                            <div class="forget">忘记密码？</div>
                            <div class="keyboard">
                                <div class="keyboard-btn" v-for="(item,key) in pay_num" :class="item.additional_class" @click="check_ipt(key)">
                                    <div class="keyboard-btn-text" v-if="key<11?true:false" :class="key==10?'text-zero':''">
                                        {{item.num}}
                                    </div>
                                    <div class="keyboard-btn-en" v-if="key<10?true:false">
                                        {{item.en}}
                                    </div>
                                    <img src="../../image/user/order_true/pay/delete.png" alt="" class="delete-num" v-if="key==11?true:false">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/axios.min.js"></script>
<script type="text/javascript" src="../../script/axios-config.js"></script>
<script type="text/javascript">
    apiready = function() {
            setRefresh()

            var vue = new Vue({
                el: '#app',
                data: {
                    is_pay: 0, //是否呼出输入弹窗 0=关闭 1弹出
                    pay_modular: 0, //0=选择支付方式 1=输入密码
                    is_pay_fun: 0, //支付方式0-3 顺序选择
                    pay_function: [{
                        id: 1,
                        name: "支付宝",
                        describe: "支付宝安全支付",
                        url: "../../image/user/order_true/pay/alipay.png",
                        en: "alipay"
                    }, {
                        id: 2,
                        name: "微信支付",
                        describe: "微信安全支付",
                        url: "../../image/user/order_true/pay/weixinpay.png",
                        en: "weixinpay"
                    }, {
                        id: 3,
                        name: "银行卡支付",
                        describe: "推荐使用银行卡",
                        url: "../../image/user/order_true/pay/h5pay.png",
                        en: "h5pay"
                    }, {
                        id: 4,
                        name: "余额支付",
                        describe: "推荐使用余额支付",
                        url: "../../image/user/order_true/pay/balancepay.png",
                        en: "balancepay"
                    }, ],
                    pay_num: [{
                        id: 1,
                        num: 1,
                        en: "",
                        additional_class: "",
                    }, {
                        id: 2,
                        num: 2,
                        en: "A B C",
                        additional_class: "",
                    }, {
                        id: 3,
                        num: 3,
                        en: "D E F",
                        additional_class: "border-r-none",
                    }, {
                        id: 4,
                        num: 4,
                        en: "G H I",
                        additional_class: "",
                    }, {
                        id: 5,
                        num: 5,
                        en: "J K L",
                        additional_class: "",
                    }, {
                        id: 6,
                        num: 6,
                        en: "M N O",
                        additional_class: "border-r-none",
                    }, {
                        id: 7,
                        num: 7,
                        en: "P Q R S",
                        additional_class: "",
                    }, {
                        id: 8,
                        num: 8,
                        en: "T U V",
                        additional_class: "",
                    }, {
                        id: 9,
                        num: 9,
                        en: "W X Y Z",
                        additional_class: "border-r-none",
                    }, {
                        id: 10,
                        num: "",
                        en: "",
                        additional_class: "border-b-none bgd2d5db",
                    }, {
                        id: 11,
                        num: 0,
                        en: "",
                        additional_class: "border-b-none",
                    }, {
                        id: 12,
                        num: "-2",
                        en: "",
                        additional_class: "border-r-none border-b-none bgd2d5db",
                        url: "../../image/user/order_true/pay/delete.png"
                    }, ],
                    ipt_box: [{
                        num: ""
                    }, {
                        num: ""
                    }, {
                        num: ""
                    }, {
                        num: ""
                    }, {
                        num: ""
                    }, {
                        num: ""
                    }],
                    ipt_num: "",
                    orderShop: [],
                    address_info: {},
                    invoice_info: '',
                    express_fee: '',
                    order_all_money: '',
                    goods_all_money: '',
                    out_trade_no: '',
                    new_order_no: ''
                },
                created: function() {
                    this.getOrderInfo();
                },
                methods: {
                    getOrderInfo: function() {
                        console.log(api.pageParam.orderType);
                        let data = {
                                token: $api.getStorage('token'),
                                type: api.pageParam.type,
                                goods_id: '',
                                sku_id: '',
                                goods_nums: '',
                                cartids: '',
                                address_id: '',
                                disuser_id: ''
                            }
                            //立即购买
                        api.pageParam.goods_id ? data.goods_id = api.pageParam.goods_id : '';
                        api.pageParam.sku_id ? data.sku_id = api.pageParam.sku_id : '';
                        api.pageParam.goods_nums ? data.goods_nums = api.pageParam.goods_nums : '';
                        // 购物车下单
                        api.pageParam.cartids ? data.cartids = api.pageParam.cartids : '';
                        // 收货地址
                        api.pageParam.address_id ? data.address_id = api.pageParam.address_id : (this.address_info.address_id != '' ? data.address_id = this.address_info.address_id : '');

                        console.log(JSON.stringify(data));
                        Axios.post(window.Url.sure_order, data).then((res) => {
                            console.log(JSON.stringify(res));
                            if (res.status == 1) {
                                this.orderShop = res.goods_info;
                                this.express_fee = res.express_fee;
                                this.order_all_money = res.order_all_money;
                                this.goods_all_money = res.goods_all_money;
                                this.address_info = res.address_info;
                            } else {
                                api.toast({
                                    msg: res.info,
                                    duration: 2000,
                                    location: 'bottom'
                                });
                            }
                        }).catch((err) => {
                            console.log(JSON.stringify(err));
                            this.orderShop = [],
                                this.address_info = {},
                                this.invoice_info = '',
                                this.express_fee = '',
                                this.order_all_money = '',
                                this.goods_all_money = ''
                            JSON.stringify(err);
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        })
                    },
                    //输入按键
                    check_ipt: function(key) {
                        var num = this.pay_num[key].num //获取按键
                        var ipt_num = this.ipt_num
                        var ipt_box = this.ipt_box
                        console.log(ipt_num.length)
                        if (num == -2) { //如果是删除键
                            if (ipt_num.length > 0) {
                                ipt_box[ipt_num.length - 1].num = ""
                                ipt_num = ipt_num.substring(0, ipt_num.length - 1)
                                console.log(ipt_num)
                                    // console.log(ipt_box)
                                this.ipt_num = ipt_num;
                                this.ipt_box = ipt_box
                            }
                            return false
                        }
                        if (ipt_num.length < 6) {
                            ipt_num += String(num)
                            console.log(ipt_num)
                            var length = ipt_num.length
                            ipt_box[length - 1].num = num
                            this.ipt_num = ipt_num;
                            this.ipt_box = ipt_box
                            if (ipt_num.length == 6) {
                                this.walletPay(ipt_num)
                            }
                        }

                    },
                    //后退
                    back_pay_modular: function() {
                        this.pay_modular = 0
                    },
                    //选择支付方式
                    select_pay_fun: function(key) {

                        this.is_pay_fun = key;
                        console.log(this.is_pay_fun);
                    },
                    //切换输入密码
                    open_pay_ipt: function() {
                        var is_pay_fun = this.is_pay_fun
                        if (is_pay_fun == 0) {
                            this.alipayPay();
                            return;
                        }
                        if (is_pay_fun == 1) {
                            this.wechatPay();
                            return;
                        }
                        if (is_pay_fun == 2) {
                            api.toast({
                                msg: '功能还在开发中，敬请期待',
                                duration: 2000,
                                location: 'bottom'
                            });
                        }
                        if (is_pay_fun == 3) { //如果为余额支付时
                            this.pay_modular = 1;
                            return;
                        }
                    },
                    //余额支付
                    walletPay: function(pay_password) {
                        let data = {
                            token: $api.getStorage('token'),
                            out_trade_no: this.out_trade_no,
                            pay_password: pay_password,
                        }
                        console.log(JSON.stringify(data));
                        Axios.post(window.Url.walletPay, data).then((res) => {
                            console.log(JSON.stringify(res));

                            if (res.status == 0) {
                                this.ipt_box = [{
                                    num: ""
                                }, {
                                    num: ""
                                }, {
                                    num: ""
                                }, {
                                    num: ""
                                }, {
                                    num: ""
                                }, {
                                    num: ""
                                }]
                                this.ipt_num = ''
                            }

                            api.toast({
                                msg: res.info,
                                duration: 2000,
                                location: 'bottom'
                            });

                            if (res.status == 1) {
                                setTimeout(() => {
                                    this.goOrderList()
                                }, 1000)
                            }

                        }).catch((err) => {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        })
                    },
                    //微信支付
                    wechatPay: function() {
                        let weiXin = api.require('weiXin');
                        var $_this = this;
                        let data = {
                            token: $api.getStorage('token'),
                            out_trade_no: $_this.out_trade_no,
                            type: 0,
                        }
                        console.log(JSON.stringify(data));
                        Axios.post(window.Url.wechatPay, data).then((res) => {
                            if (res.status == 1) {
                                weiXin.payOrder({
                                    orderId: res.prepayid,
                                    partnerId: res.partnerid,
                                    nonceStr: res.noncestr,
                                    timeStamp: res.timestamp,
                                    package: res.package,
                                    sign: res.sign
                                }, function(ret, err) {
                                    if (ret.status) {} else {}
                                });
                            }
                        }).catch((err) => {
                            api.alert({
                                msg: JSON.stringify(err.info)
                            });
                        })

                    },
                    // 支付宝支付
                    alipayPay: function() {
                        var $_this = this;
                        let data = {
                            token: $api.getStorage('token'),
                            out_trade_no: $_this.out_trade_no,
                            type: 0,
                        }
                        console.log(JSON.stringify(data))
                        Axios.post(window.Url.alipayPay, data).then((res) => {
                            console.log(JSON.stringify(res));
                            if (res.status == 1) {
                                console.log(res.info);
                                var aliPay = api.require('aliPay');
                                aliPay.payOrder({
                                    // orderInfo: 'app_id=2018030502318781&biz_content=%7B%22body%22%3A%22%5Cu751f%5Cu610f%5Cu5e2eAPP%5Cu8d2d%5Cu7269%5Cu652f%5Cu4ed8%22%2C%22subject%22%3A%22%5Cu751f%5Cu610f%5Cu5e2eAPP%5Cu8d2d%5Cu7269%5Cu652f%5Cu4ed8%22%2C%22out_trade_no%22%3A%2220181107165426ba81697745%22%2C%22timeout_express%22%3A%2230m%22%2C%22total_amount%22%3A%220.01%22%2C%22product_code%22%3A%22QUICK_MSECURITY_PAY%22%7D&charset=UTF-8&format=json&method=alipay.trade.app.pay&notify_url=http%3A%2F%2Ft.shunshiniao.net%2FApi%2FApi%2FFreeshopping_alipayCallback&sign_type=RSA2&timestamp=2018-11-07+16%3A54%3A30&version=1.0&sign=lLAeCEu1gcr1MYQinm%2FJj72RFvVroTFj1HvVkiU%2BG07Vk1dubBDQJisK90Y%2FnYnjG5vMgKuWd9w7pLKHnJajl0gcGV%2FoXcM4aXh7yO1g1zYeEi861TbJZ1u87tTT9S%2B2kTVZLxFUx%2FV0ZWdPfhhj55cGOi9oeqT%2BYeF5VpxSSyy7R%2FyHfLGf6iFh4AgQbwgxyUeSA1kl1%2BudKnc67YcmSzPVNLq3kiVpU1agaDixc1IDULs1TOeI978HLS%2B%2FWcpx7%2FGiG1RfSS0ttaaAzVpr3ZUnVz7UmK1LstVHusK6T7P2FNndFzZUHUJX28TlPM9K1SXbnT%2FPqaJGdxle%2FlDJeg%3D%3D'
                                    orderInfo: res.info
                                }, function(ret, err) {
                                    api.alert({
                                        title: '支付结果',
                                        msg: ret.code,
                                        buttons: ['确定']
                                    });
                                });
                            }
                        }).catch((err) => {
                          console.log(JSON.stringify(err));
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        })

                    },
                    //打开弹窗
                    open_pay_modular: function() {

                        let data = {
                                token: $api.getStorage('token'),
                                type: api.pageParam.type,
                                goods_id: '',
                                sku_id: '',
                                goods_nums: '',
                                cartids: '',
                                address_id: '',
                                disuser_id: ''
                            }

                        //立即购买
                        api.pageParam.goods_id ? data.goods_id = api.pageParam.goods_id : '';
                        api.pageParam.sku_id ? data.sku_id = api.pageParam.sku_id : '';
                        api.pageParam.goods_nums ? data.goods_nums = api.pageParam.goods_nums : '';
                        // 购物车下单
                        api.pageParam.cartids ? data.cartids = api.pageParam.cartids : '';
                        // 收货地址
                        api.pageParam.address_id ? data.address_id = api.pageParam.address_id : (this.address_info.address_id != '' ? data.address_id = this.address_info.address_id : '');

                        console.log(JSON.stringify(data))
                        Axios.post(window.Url.make_order, data).then((res) => {
                            console.log(JSON.stringify(res));
                            if (res.status == 1) {
                                this.createPay(res.type, res.order_no);
                                this.new_order_no = res.order_no;
                            } else {
                                api.toast({
                                    msg: res.info,
                                    duration: 2000,
                                    location: 'bottom'
                                });
                            }
                        }).catch((err) => {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        })
                    },
                    // 生成支付号
                    createPay: function(type, order_no) {
                        let data = {
                            token: $api.getStorage('token'),
                            type: type,
                            order_no: order_no,
                        }
                        Axios.post(window.Url.before_pay_info, data).then((res) => {
                            console.log(JSON.stringify(res));
                            if (res.status == 1) {
                                this.is_pay = 1;
                                this.out_trade_no = res.out_trade_no
                            } else {
                                api.toast({
                                    msg: res.info,
                                    duration: 2000,
                                    location: 'bottom'
                                });
                            }
                        }).catch((err) => {
                            api.alert({
                                msg: JSON.stringify(err)
                            });
                        })
                    },
                    //关闭弹窗
                    close_pay_modular: function() {
                        this.is_pay = 0;
                    },
                    // 跳转到收货地址
                    select_address: function() {
                        console.log('调用了')
                        api.openWin({
                            name: 'myInfo_my_info',
                            url: '../user/set/my_information/my_information.html',
                            pageParam: {
                                cartids: api.pageParam.cartids,
                                orderType: 3
                            }
                        });
                    },
                    //跳转都订单列表
                    goOrderList: function() {
                        api.openWin({
                            name: 'goOrderList',
                            url: '../user/user_order.html',
                            pageParam: {

                            }
                        });
                    },
                    //跳转到设置密码
                    goPayPassword: function() {
                        api.openWin({
                            name: 'goPayPassword',
                            url: '../user/paysetting/paysetting',
                            pageParam: {

                            }
                        });
                    }
                }
            })
        }
        //刷新
    function setRefresh() {
        var pullRefresh = new auiPullToRefresh({
            container: document.querySelector('.aui-refresh-content'),
            triggerDistance: 100
        }, function(ret) {
            if (ret.status == "success") {
                setTimeout(function() {
                    pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                }, 1500)
            }
        })
    }

    function close_win() {
        api.closeWin({});
    }
</script>
